<template>
	<!--  #ifdef APP -->
	<view class="login-page">
		<image src="@/static/images/login_logo.png" style="width: 442rpx; height: 382rpx" mode=""></image>

		<view class="font-28 mb-36" style="margin-top: 50rpx">欢迎使用</view>
		<view class="font-48 mb-16" style="font-weight: bold">惠和安教</view>
		<view class="font-36 mb-36">票务系统</view>
		<u-form :model="form" ref="uForm" :error-type="['toast']">
			<view class="d-flex align-center">
				<image src="@/static/images/phone.png" class="mr-18" style="width: 59rpx; height: 59rpx;" mode=""></image>
				<text class="font-24">账号</text>
			</view>
			<u-form-item  prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入账号" />
			</u-form-item>
			<view class="d-flex align-center">
				<image src="@/static/images/password.png" class="mr-18" style="width: 59rpx; height: 59rpx;" mode=""></image>
				<text class="font-24">密码</text>
			</view>
			<u-form-item  prop="password">
				<u-input v-model="form.password" type="password" placeholder="请输入密码" />
			</u-form-item>
		</u-form>
		<button @click="pwdLogin">立即登录</button>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<view class="login-page">
		<image src="@/static/images/login_logo.png" style="width: 442rpx; height: 382rpx" mode=""></image>

		<view class="font-28 mb-56" style="margin-top: 140rpx">欢迎使用</view>
		<view class="font-48 mb-20" style="font-weight: bold">惠和安教</view>
		<view class="font-36">票务系统</view>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<image src="@/static/images/wx_icon.png"></image>
			授权登录
		</button>
	</view>
	<!-- #endif -->
</template>

<script>
	import {
		xcxLogin,
		pwdLogin
	} from '@/api/home.js'
	import storage from '@/utils/storage.js'
	export default {
		data() {
			return {
				// comment: {},//用于提交服务器获取手机号码对象
				txt: 'Hi~请先登录',
				avatar: '/static/images/head-g.png',
				userInfo: {},
				form: {
					mobile: '',
					password: ''
				},
				rules: {
					mobile: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		methods: {
			// #ifdef MP-WEIXIN
			getPhoneNumber(e) {
				console.log('获取电话号', e)
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					return false
				}
				if (e.detail.errno == 1400001) {
					uni.showToast({
						title: '连接超时',
						icon: 'none'
					})
					return false
				}
				xcxLogin({
						code: e.detail.code
					})
					.then((res) => {
						console.log('res', res)
						uni.setStorageSync('userInfo', res.data.data) //用户信息本地存储
						uni.setStorageSync('token', res.data.token) //用户信息本地存储
						this.$store.commit('setUserInfo', res.data.data)
						this.$store.commit('setToken', res.data.token)
						storage.setAccessToken(res.data.token) // token存储
						uni.showToast({
							title: '登录成功',
							success: (resx) => {
								uni.navigateBack({
									delta: 1,
									fail() {
									  uni.switchTab({
										url: '/pages/tabbar/home/home'
									  })
									}
								})
							}
						})
					})
					.catch((err) => {
						uni.redirectTo({
							url: '/pages/my-sub/err-login/err-login?type=1'
						})
					})
			},
			// #endif
			// #ifdef APP
			pwdLogin() {
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						pwdLogin(this.form)
							.then((res) => {
								console.log('res', res)
								uni.setStorageSync('userInfo', res.data.data) //用户信息本地存储
								uni.setStorageSync('token', res.data.token) //用户信息本地存储
								this.$store.commit('setUserInfo', res.data.data)
								this.$store.commit('setToken', res.data.token)
								storage.setAccessToken(res.data.token) // token存储
								uni.showToast({
									title: '登录成功',
									success: (resx) => {
										uni.navigateBack({
											delta: 1
										})
									}
								})
							})
							.catch((err) => {
								uni.redirectTo({
									url: '/pages/my-sub/err-login/err-login?type=1'
								})
							})
					} else {
						console.log('验证失败')
					}
				})
			}
			// #endif
		},
		async onLoad(options) {
			this.$store.commit('setUserInfo', null)
			this.$store.commit('setToken', '')
		},
		// #ifdef APP
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
		// #endif
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(to bottom, #ffcc4b, #ffffff);
		overflow: hidden;
	}
	/* #ifdef MP-WEIXIN */
	.login-page {
		box-sizing: border-box;
		padding: 100rpx 154rpx;
		padding-top: 220rpx;

		button {
			position: absolute;
			bottom: 150rpx;
			width: 440rpx !important;
			height: 100rpx;
			color: #ffffff;
			font-size: 30rpx !important;
			line-height: 46rpx !important;
			font-weight: normal !important;
			background: #000 !important;
			border-radius: 50rpx !important;
			@include flex-just();
		}

		button image {
			width: 67rpx;
			height: 54rpx;
			margin-right: 20rpx;
		}
	}
	/* #endif */
	/* #ifdef APP */
	.login-page {
		box-sizing: border-box;
		padding: 100rpx 154rpx;
		padding-top: 180rpx;
	
		button {
			margin-top: 60rpx;
			width: 440rpx !important;
			height: 100rpx;
			color: #ffffff;
			font-size: 30rpx !important;
			line-height: 46rpx !important;
			font-weight: normal !important;
			background: #000 !important;
			border-radius: 50rpx !important;
			@include flex-just();
		}
	
		button image {
			width: 67rpx;
			height: 54rpx;
			margin-right: 20rpx;
		}
		.u-input {
			background: #fff;
			border-radius: 10rpx;
		}
				
		.u-input__input {
			height: 64rpx;
			padding: 0 20rpx;
		}
		.u-input__right-icon {
			padding-right: 20rpx;
		}
	}
	/* #endif */
</style>